<!--  -->
<template>
    <div class="attend-container">
        <el-row>面包屑导航</el-row>
        <el-row>搜索区</el-row>
        <el-row>

            <el-button-group>
                <el-button type="success" @click="btnAddClick">录入考勤</el-button>
                <el-button type="primary">调整考勤</el-button>
                <el-button type="danger">删除</el-button>
            </el-button-group>

            <el-table stripe border :data="tableData" style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="90">
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center" width="180"/>
                <el-table-column prop="gender" label="性别" align="center" width="180"/>
                <el-table-column prop="age" label="年龄" align="center" width="180"/>
                <el-table-column prop="date" label="日期" align="center" width="220"/>
                <el-table-column prop="isAttend" label="出勤状态" align="center"/>
                <el-table-column label="操作"  >
                  <template #default="{row}">
                    <el-button
                            size="mini"
                            @click="handleEdit(row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(row)">删除</el-button>
                  </template>
                </el-table-column>

            </el-table>

            <el-pagination
                    layout="->,total, sizes, prev, pager, next, jumper"
                    :total="50"
            >
            </el-pagination>
        </el-row>


        <el-dialog  v-model="dialogVisible"
                    width="30%">


                      <el-form label-width="90">

                           <el-form-item label="姓名">
                              <el-input v-model="current.name"></el-input>
                           </el-form-item>

                           <el-form-item label="考勤状态">
                                <el-select v-model="current.status.id">
                                      <el-option :value=values[0] label="出勤"></el-option>
                                      <el-option :value=values[1] label="缺勤 "></el-option>
                                </el-select>
                           </el-form-item>


                           <el-form-item>
                                  <el-button type="success" @click="btnSubmitClick">确定</el-button>
                           </el-form-item>
                      </el-form>
  

        </el-dialog>
    </div>
</template>

<script>

</script>

<script>


    export default {
        data() {
            return {
                tableData: [],
                dialogVisible:false,
                values:[1,2],
                current:{
                     name:'',
                     status:{
                         id:1,
                         title:''
                     }
                }
            };
        },
        mounted() {

            this.axios({
                url: 'http://test.org/attend',
                method: 'get',
                dataType: 'json'
            }).then((res) => {
                this.tableData = res.data;
            })

        },

        components: {},

        computed: {},


        methods: {
             btnAddClick(){
                   this.dialogVisible = true;

             }, handleEdit( row) {
                 //this.current = row;
                 
                 this.current={
                    id:row.id,
                    name:row.name,
                    status:{
                        id:row.isAttend=='出勤'?1:2
                    }
                 }


                this.dialogVisible = true;
                console.log(row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },btnSubmitClick(){

                this.axios({
                    url:'http://test.org/attend/edit',
                    method:'get',
                    dataType:'json'
                  //  params:this.current
                }).then((res)=>{
                    
                        console.log(this.current);
                        this.dialogVisible=false;

                })

               

            }
        }
    }

</script>
<style scoped>

    .attend-container {
        padding: 15px;
    }


    .el-select{
         width:100%
    }

</style>